<template>
	<view class="txl">
		<view class="select"><uni-search-bar placeholder="搜素" bgColor="#EEEEEE" @confirm="search" style="margin-bottom: 40rpx;" /></view>
		<view class="minas">&nbsp;</view>
		<view class="main"><uni-indexed-list :options="list" :show-select="false" @click="bindClick" /></view>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import pinyin from 'pinyin';
export default {
	data() {
		return {
			searchValue: '123123',
			friends: [
				{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
				{ name: '把克苏机场', img: '' },
				{ name: '从克苏机场', img: '' },
				{ name: '的克苏机场', img: '' },
				{ name: '额克苏机场', img: '' },
				{ name: '分克苏机场', img: '' },
				{ name: '给克苏机场', img: '' },
				{ name: 'h克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
				{ name: 'i克苏机场', img: '' },
				{ name: '就克苏机场', img: '' },
				{ name: '可克苏机场', img: '' },
				{ name: 'l克苏机场', img: '' },
				{ name: '吗克苏机场', img: '' },
				{ name: 'n克苏机场', img: '' },
				{ name: '哦克苏机场', img: '' },
				{ name: '篇克苏机场', img: '' },
				{ name: '123克苏机场', img: '' },
				{ name: '23克苏机场', img: '' },
				{ name: '123克苏机场', img: '' },
				{ name: '&23克苏机场', img: '' },
			],
			list: [
				// 有图片的显示头像没有图片的取的名称的第一位
				{
					letter: 'A',
					data: [
						{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
						{ name: '阿克苏机场', img: '' }
					]
				},
				{
					letter: 'B',
					data: [
						{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
						{ name: '阿克苏机场', img: '' }
					]
				},
				{
					letter: 'C',
					data: [
						{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
						{ name: '阿克苏机场', img: '' }
					]
				},
				{
					letter: '',
					data: [
						{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
						{ name: '阿克苏机场', img: '' }
					]
				},
				{
					letter: 'E',
					data: [
						{ name: '阿克苏机场', img: 'https://img0.baidu.com/it/u=691440244,3989547521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
						{ name: '阿克苏机场', img: '' }
					]
				}
			]

		};
	},
	methods: {
		toPinyin(str) {
			if (!str) return '';
			return pinyin(str, {
				style: pinyin.STYLE_NORMAL, // 设置拼音风格
				heteronym: false // 是否启用多音字模式
			}).join('');
		},
		search(res) {
			uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
			});
		},
		bindClick(e) {
			console.log('点击item，返回数据' + JSON.stringify(e));
		},

		getfriendslist() {
			const friendlist = {}
			this.friends.forEach(i => {

				let first = this.toPinyin(i.name).substring(0, 1).toUpperCase();
				// console.log(first)
				if(!(/^[a-zA-Z]+$/.test(first))){first='#'}
				if (friendlist[first]) {
					friendlist[first].push(i);
				} else {
					friendlist[first] = [i];
				}

			});

			// 	 /**
			// 	  * sort 默认是根据每个元素的 ASCII 码进行排序
			// 	  * 对于数字可以直接比较 但如果是字符就没有意义
			// 	  * 规则：如果 a - b 是负数，也就是 a < b , 那么 a 在前面，返回 -1。
			// 	  * 如果 a - b 是正数，也就是 a > b , 那么 b 在前面，返回 1
			// 	  * 如果两个相等，那就啥也不干，返回 0
			// 	  */

				 let keys = Object.keys(friendlist).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
					let arr = []
					for (let i in friendlist){
						arr.push({
							letter:i,
							data:friendlist[i]
						})
					}

					this.list = arr
		}
	},

	onLoad() {
		console.log(1231);
		this.getfriendslist();
	},
	computed: {},
	// 注册插件
	components: {
		// uniSearchBar
	}
};
</script>

<style lang="scss">
.txl {
	// position: relative;
	// .main {
	// 	// position: absolute
	// 	// top: 50px;
	// 	margin-top: 50px;
	// }
	// minas{
	// 	height: 100rpx;
	// }
	.select {
		// position: absolute;
		// top: 0px;
		// z-index: 10;
	}
	.uni-indexed-list {
		top: 100rpx;
	}
}
</style>
